<template>
  <div class='wrap'>
    <el-button type="primary" @click="exportexcel">导出</el-button>
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label">会员列表</span>
        <!-- 搜索 -->
        <VipSearch @searchfundata="searchfundata" @sizerfun="sizerfun"/>
        <!-- 表格 -->
        <VipTable :arr='arr' @rest='initGetHome' />
        <!-- 分页 -->
        <VipPage :page="page" :pageSize="pageSize" :pageSizes="pageSizes" @changPage='changPage' @changPageSize='changPageSize' />
      </el-tab-pane>
      <el-tab-pane label="储值管理"></el-tab-pane>
      <el-tab-pane label="积分管理"></el-tab-pane>
      <el-tab-pane label="积分设置"></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import VipTable from "../vip/components/VipTable.vue";
import VipSearch from "../vip/components/VipSearch.vue";
import VipPage from "../vip/components/VipPage.vue";
import { getVipData } from '../../api/homeApi.js'
import {export_json_to_excel} from '../../utils/Export2Excel'
export default {
  components: {
    VipTable,
    VipSearch,
    VipPage,
  },
  data () {
    return {
      arr: [],
      page: 1,//当前页码
      pageSize: 20,//每页多少条
      pageSizes: [20, 40, 60, 80, 100],
      keyword: '',//关键字
      viptype: ''
    }
  },
  mounted () {
    this.initGetHome();
  },
  methods: {
    sizerfun(val){
      this.viptype = val
      this.initGetHome();
    },
    
    searchfundata (val) {
      //val就是关键词
      this.keyword = val
      this.initGetHome()
    },

    initGetHome () {
      console.log("init home");
      getVipData({ viptype:this.viptype, keyword: this.keyword, page: this.page, pageSize: this.pageSize }).then(res => {
        if (res.code == 200) {
          this.arr = res.data;
        }
      })
    },
    changPage (val) {
      this.page = val,
        this.initGetHome()
    },
    changPageSize (val) {
      this.pageSize = val,
        this.initGetHome()
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    },
    exportexcel(){
      const tHeader =['卡号','会员等级','会员姓名','手机号码','累计消费(元)','储存余额(元)','累计储值','积分','开卡时间','到期时间','会员状态'];
      const filterVal=['card','level','name','phone','consumption','balance','stockpile','integral','date','time','state'];
      getVipData({ viptype:this.viptype, keyword: this.keyword, page: 1, pageSize: 100000 }).then(res => {
        if (res.code == 200) {
          console.log("导出:",res.data);
          const data = this.formatJson(filterVal, res.data)
          export_json_to_excel({
              data,
              header: tHeader,//excel头部列表
              filename: '导出会员信息',
              autoWidth: true,//自适应宽高
              bookType: 'xlsx'//文件类型
            })
          }
      })
     
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.el-tabs__item {
  height: 60px;
  line-height: 60px;
}
.wrap {
  position: relative;
  height: 110px;
}
.el-button {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 999;
}
/deep/.el-tabs__content {
  min-height: 700px;
}
</style>
   
